<template>
<!-- 
  胡龙伟
  视频的精选页面
  2021/8/29
 -->
  <div class="knowledge">
    <!-- 分类导航 -->
    <div class="navSearsh">
      <ul class="navItem">
        <li  @click="changeBG(index)" v-for="(c1,index) in list1" :key="index" :class="{ first: index==isSow }">{{c1.name}}</li>
      </ul>
      <ul class="navItem">
        <li  @click="changeBG1(index)" v-for="(c1,index) in list2" :key="index" :class="{ first: index==isSow1 }">{{c1.name}}</li>
      </ul>
      <!-- 隐藏的那一栏
      <ul class="navItem haveBG" v-show="isSow1 !== 0">
        <li class="hidden">全部分类</li>
        <li>社科</li>
        <li>成长</li>
        <li>职场</li>
        <li>考试通过</li>
        <li>生活娱乐</li>
        <li>情感</li>
        <li>亲子</li>
        <li>科学</li>
        <li>前沿技能</li>
        <li>财商</li>
        <li>文学</li>
        <li>艺术</li>
      </ul> -->
      <ul class="navItem">
        <li  @click="changeBG2(index)" v-for="(c1,index) in list3" :key="index" :class="{ first: index==isSow2 }">{{c1.name}}</li>
      </ul>
      <ul class="navItem">
        <li  @click="changeBG3(index)" v-for="(c1,index) in list4" :key="index" :class="{ first: index==isSow3 }">{{c1.name}}</li>
      </ul>
      <ul class="navItem">
        <li  @click="changeBG4(index)" v-for="(c1,index) in list5" :key="index" :class="{ first: index==isSow4 }">{{c1.name}}</li>
      </ul>
      
      
      
    </div>
    <hr />
    <!-- 内容区域  -->
    <div class="content">
      <div class="title">
        <div class="pailie">排列方式</div>
        <div class="gongge">宫格</div>
      </div>
      <!-- 宫格 -->
      <van-row class="allBook" gutter="20">
        <van-col class="bookItem" span="8" v-for="item in valueList" :key="item.sku_id">
          <div class="allImg">
            <img
              class="firstImg"
              :src="item.artwork"
              width="100px"
              height="120px"
            />
            <img
              class="vipImg"
              src="../../../assets/vip.jpg"
              width="30px"
              height="18px"
            />
            <img
              class="zhuanlan"
              src="../../../assets/title.jpg"
              width="40px"
              height="16px"
            />
          </div>
          <div class="bookTitle">
            {{item.title}}
          </div>
          <div class="bookSub">{{item.content_text}}</div>
        </van-col>
      </van-row>
      <!-- 列表 -->
    </div>
  </div>
</template>

<script>
import {getStory,getList} from '../../../api/index'
export default {
  name: 'VipInfo',
  data() {
    return {
      isSow: 0,
      isSow1: 0,
      isSow2: 0,
      isSow3: 0,
      isSow4:0,
      valueList:[],   //内容区数据
      list1:[],
      list2:[],
      list3:[],
      list4:[],
      list5:[],
      aindex:0
    }
  },
  mounted(){
    this.getVipList()
  },
  methods: {
    async getVipList(){
      let p = await getStory()
      if(p.code==200){
        this.valueList = p.StoryData
        // console.log(p);
      }

      let res = await getList()
      this.list1 = res.getList[0].List1
      this.list2 = res.getList[1].List1
      this.list3 = res.getList[2].List1
      this.list4 = res.getList[3].List1
      this.list5 = res.getList[4].List1
    },
    changeBG(index){
      this.isSow = index
    },
    changeBG1(index){
      this.isSow1 = index
    },
    changeBG2(index){
      this.isSow2 = index
    },
    changeBG3(index){
      this.isSow3 = index
    },
    changeBG4(index){
      this.isSow4 = index
    }
  },
}
</script>

<style lang="less" scoped>
// 分类导航
.navSearsh {
  
  padding: 0 10px;
  font-size: 12px;
  .navItem {
    
    height: 30px;
    margin: 5px 0;
    display: -webkit-box;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    &::-webkit-scrollbar {
            display: none;
        }

    .first {
      color: #c89c58;
      background-color: #f6f7f0;
      border-radius: 5px;
    }
    li {
      color: #8c8c8c;
      padding: 0 10px;

      line-height: 30px;
    }
  }
  .haveBG {
    background-color: rgb(214, 214, 214);
    .hidden {
      color: #c89c58;
    }
  }
}
// 宫格样式
.content {
  font-size: 14px;
  padding: 0 15px;
  .title {
    display: flex;
    justify-content: space-between;
    div {
      color: #a6a6a6;
    }
  }
  .allBook {
    .bookItem {
      margin: 10px 0;
      .allImg {
        width: 100px;
        height: 120px;
        position: relative;
        .firstImg {
          border-radius: 5px;
        }
        .vipImg {
          position: absolute;
          border-radius: 5px 0 5px 0;
          left: 0;
        }
        .zhuanlan {
          position: absolute;
          opacity: .8;
          bottom: 0;
          right: 0;
          border-radius: 5px 0 5px 0;
        }
      }

      .bookTitle {
        margin: 3px 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .bookSub {
        color: #a6a6a6;
        font-size: 12px;
      }
    }
  }
}
</style>
